import { Directive, ElementRef, Input, SimpleChange } from "@angular/core";
import { Database } from "src/app/types/db/DbType";

@Directive({ selector: '[db-type]' })
export class DisplayDbType {
  @Input('db-type')
  bgClass?: string;

  @Input('db')
  db?: Database;

  constructor(private element: ElementRef) { }

  ngOnInit() {
    this.element.nativeElement.classList.add(this.bgClass || 'default');
  }

  ngOnChanges(changes: { [property: string]: SimpleChange }) {
    let bgChange = changes['bgClass'];
    let classes = this.element.nativeElement.classList;

    if (!bgChange.isFirstChange() && classes.contains(bgChange.previousValue)) {
      classes.remove(bgChange.previousValue);
    }

    if (!classes.contains(bgChange.currentValue)) {
      classes.add(bgChange.currentValue);
    }
  }
}